<template>
    <div class="headerInfo" :style="{backgroundImage:'url('+bgImgUrl+')'}">
      <div class="headerInfo-content">
        <p class="leftTitle">{{leftTitle}}</p>
        <div class="rightTitle">
          <img src="@/assets/sthj/img/tb.png" />
          <p class="">{{rightTitle}}</p>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    name: 'HcsthjHeaderinfo',
    props:{
            bgImgUrl:{
                type:String,
                default:()=>{
                    return ''
                }
            },
            leftTitle:{
                type:String,
                default:()=>{
                    return ''
                }
            },
            rightTitle:{
                type:String,
                default:()=>{
                    return ''
                }
            }
    },
    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="less" scoped>
.headerInfo {
  width: 100%;
  height: 180px;
  border: 2px solid #0cb06d;

}
.headerInfo-content {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .leftTitle {
    font-size: 32px;
    font-family: PangMenZhengDao;
    color: #ffffff;
  }
  .rightTitle {
    min-width: 280px;
    height: 50px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    p{
        font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
    }
  }
}
</style>